<template>
  <div>
    <Row class="header" type="flex" justify="start">
      <Col span="24">
        <Icon class="icon" type=""/>
        <span class="title">各区、县（市）疫情人数分布</span>
      </Col>
    </Row>
    <br>
    <Row type="flex" justify="center">
      <Col span="24">
        <Table stripe :border="false" :columns="tableColumns" :data="tableData"></Table>
      </Col>
    </Row>
  </div>
</template>

<script>
import { findAllIllnessStateNumAreaList } from '@/api/yi-qing-fang-kong'
import { sortByProp } from '@/libs/tools'
// import mockData from './mockData'

export default {
  name: 'DistrictSituationTable',
  data () {
    return {
      tableColumns: [
        {
          title: '区县',
          key: 'area',
          align: 'center',
          tooltip: true,
          minWidth: 70
        },
        {
          title: '确诊',
          key: 'diagnosis',
          align: 'center',
          minWidth: 50,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#E55428'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '疑似',
          key: 'suspected',
          align: 'center',
          minWidth: 50,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#F3A94F'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '死亡',
          key: 'die',
          align: 'center',
          minWidth: 50,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#91908E'
                }
              }, params.column.title)
            ])
          }
        },
        {
          title: '治愈',
          key: 'cure',
          align: 'center',
          minWidth: 50,
          renderHeader: (h, params) => {
            return h('span', [
              h('span', {
                style: {
                  'color': '#088E81'
                }
              }, params.column.title)
            ])
          }
        }
      ],
      tableData: []
    }
  },
  props: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      findAllIllnessStateNumAreaList().then(ret => {
        if (ret.data.errcode === 0) {
          // 全部清0
          // this.tableData = ret.data.data
          // this.tableData.forEach(item => {
          // item.diagnosis = 0
          // item.suspected = 0
          // item.die = 0
          // item.cure = 0
          // })
          // 排序
          let tableData = ret.data.data
          this.tableData = []
          const sort = ['和平区', '沈河区', '铁西区', '皇姑区', '大东区', '浑南区', '于洪区', '沈北新区', '苏家屯区', '辽中区', '新民市', '法库县', '康平县']
          tableData.forEach(item => {
            let sortId = sort.indexOf(item.area)
            item.sortId = sortId
          })
          this.tableData = tableData.sort(sortByProp('sortId'))
        } else {
          this.$Message.error({
            content: '数据获取失败,\n' + ret.data.errmsg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }

  /deep/ .ivu-table-wrapper {
    border: none;
  }

  /deep/ .ivu-table:before {
    content: '';
    width: 100%;
    height: 0px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1
  }

  /deep/ .ivu-table:after {
    content: '';
    width: 0px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3
  }
</style>
